<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in list" @click="play(index)">
        {{ item.split("/")[2] }}
        <audio
          :src="'http://download.websong.wang' + item"
          ref="audiodom"
        ></audio>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from "vue";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const audiodom = ref(null);
    const list = ref([
      "/wordaudio/activated.mp3",
      "/wordaudio/api.mp3",
      "/wordaudio/beforeCreate.mp3",
      "/wordaudio/beforeDestroy.mp3",
      "/wordaudio/beforeMount.mp3",
      "/wordaudio/beforeUpdate.mp3",
      "/wordaudio/bind.mp3",
      "/wordaudio/capture.mp3",
      "/wordaudio/cloak.mp3",
      "/wordaudio/component.mp3",
      "/wordaudio/components.mp3",
      "/wordaudio/computed.mp3",
      "/wordaudio/created.mp3",
      "/wordaudio/data.mp3",
      "/wordaudio/deactivated.mp3",
      "/wordaudio/delete.mp3",
      "/wordaudio/destroy.mp3",
      "/wordaudio/destroyed.mp3",
      "/wordaudio/dict.js",
      "/wordaudio/directive.mp3",
      "/wordaudio/directives.mp3",
      "/wordaudio/effect.mp3",
      "/wordaudio/else.mp3",
      "/wordaudio/emit.mp3",
      "/wordaudio/enter.mp3",
      "/wordaudio/errorCaptured.mp3",
      "/wordaudio/filters.mp3",
      "/wordaudio/for.mp3",
      "/wordaudio/forceUpdate.mp3",
      "/wordaudio/html.mp3",
      "/wordaudio/if.mp3",
      "/wordaudio/include.mp3",
      "/wordaudio/keep-alive.mp3",
      "/wordaudio/lazy.mp3",
      "/wordaudio/left.mp3",
      "/wordaudio/methods.mp3",
      "/wordaudio/middle.mp3",
      "/wordaudio/mixins.mp3",
      "/wordaudio/model.mp3",
      "/wordaudio/mount.mp3",
      "/wordaudio/mounted.mp3",
      "/wordaudio/name.mp3",
      "/wordaudio/nextTick.mp3",
      "/wordaudio/number.mp3",
      "/wordaudio/off.mp3",
      "/wordaudio/on.mp3",
      "/wordaudio/once.mp3",
      "/wordaudio/passive.mp3",
      "/wordaudio/pre.mp3",
      "/wordaudio/prevent.mp3",
      "/wordaudio/props.mp3",
      "/wordaudio/qualifier.mp3",
      "/wordaudio/right.mp3",
      "/wordaudio/self.mp3",
      "/wordaudio/set.mp3",
      "/wordaudio/show.mp3",
      "/wordaudio/slot.mp3",
      "/wordaudio/stop.mp3",
      "/wordaudio/sync.mp3",
      "/wordaudio/tab.mp3",
      "/wordaudio/template.mp3",
      "/wordaudio/text.mp3",
      "/wordaudio/transition.mp3",
      "/wordaudio/trim.mp3",
      "/wordaudio/updated.mp3",
      "/wordaudio/use.mp3",
      "/wordaudio/Vue.mp3",
      "/wordaudio/watch.mp3",
    ]);

    const play = (i) => {
      // 播放的方法
      // console.log(i);
      // let dom = document.querySelectorAll("audio")[i];
      // dom.play();
      // console.log(audiodom.value);
      audiodom.value[i].play();
    };
    return {
      list,
      play,
      audiodom,
    };
  },
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
  display: inline-block;
  padding: 5px 10px;
  background: green;
  color: #fff;
  margin: 0 10px 10px 0;
  border-radius: 5px;
}
</style>
